<style scoped lang="less">
	.demonstration {
		margin-right: 15px;
		margin-left: 15px;
	}
	.vipmassge {
		margin-right: 15px;
	}

	.el-button {
		margin-left: 15px;
	}
	.el-input__wrapper {
		margin-right: 15px;
	}
	h3 {
		margin-bottom: 20px;
	}

	.item1,
	.item2 {
		display: flex;
		flex-wrap: wrap;
	}

	// .el-table {
	// 	width: 100vh;
	// }
	.common-layout {
		background: #f2f3f5;
		.el-header {
			padding: 0 !important;
			height: 10vh;
		}
		.el-main {
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}

	.tableclass {
		display: flex;
		margin-top: 10px;
		margin-bottom: 20px;
		margin-left: 30px;
		font-size: 16px;
		font-weight: 700;
		p{
			margin-right: 20px;
		}
	}
	.ordercode{
		margin-right: 20px;
	}
	.cell{
		text-align: center !important;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
</style>
<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<h3>
					订单列表
				</h3>
				<div class="item1">
					<el-form-item label="订单信息" label-width="90">
						<el-select style="width: 200px" v-model.number="codevalue" clearable placeholder="订单编号">
							<el-option v-for="item in code" :key="item.value" :label="item.order_code"
								:value="item.order_code" />
						</el-select>
					</el-form-item>
					<el-form-item label="支付类型" label-width="90">
						<el-select style="width: 200px" v-model.number="methodsvalue" clearable placeholder="请选择">
							<el-option v-for="item in methods" :key="item.value" :label="item.payMethodName"
								:value="item.payMethodId" />
						</el-select>
					</el-form-item>
					<el-form-item label="订单来源" label-width="90">
						<el-select style="width: 200px" v-model.number="soursevalue" clearable placeholder="请选择">
							<el-option v-for="item in sourse" :key="item.value" :label="item.orderSourceName"
								:value="item.orderSourceId" />
						</el-select>
					</el-form-item>
				</div>
				<div class="item2">
					<el-form-item label="创建时间" label-width="90">
						<el-date-picker
							v-model="createStarTime"
							type="date"
							placeholder="开始时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							style="width: 130px"
						/>-
						<el-date-picker 
							v-model="createEndTime"
							type="date"
							placeholder="结束时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							style="width: 130px"
						/>
					</el-form-item>

					<el-form-item label="支付时间" label-width="90">
						<el-date-picker
							v-model="payStartTime"
							type="date"
							placeholder="开始时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							style="width: 130px"
						/>-
						<el-date-picker 
							v-model="payEndTime"
							type="date"
							placeholder="结束时间"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							style="width: 130px"
						/>
					</el-form-item>


					<el-button type="primary" @click="searchOrder">搜索</el-button>
					<el-button type="plain" @click="replay">重置</el-button>
				</div>
				
				<el-tabs v-model="activeName" class="demo-tabs" @click="goType(activeName)">
				   <el-tab-pane label="全部" name="1"></el-tab-pane>
				   <el-tab-pane label="待支付" name="2"></el-tab-pane>
				   <el-tab-pane label="待发货" name="6"></el-tab-pane>
				   <el-tab-pane label="已发货" name="7"></el-tab-pane>
				   <el-tab-pane label="已完成" name="12"></el-tab-pane>
					<el-tab-pane label="已关闭" name="20"></el-tab-pane>					
				 </el-tabs>
			<div style="height: 44vh; overflow-y: auto;">
				<div v-if="showTips" style="width: 65px;margin: 20px auto;">暂无数据</div>
				<div v-else v-for="order in orderlist" :key="orderlist.order_id">
					<div class="order-header" style="background-color: #f7f8fa;height: 50px;line-height: 50px;">
					  <span class="ordercode">订单编号：{{ order.order_code }}</span>
					  <span>创建时间：{{ order.create_time }}</span>
					  <span v-if="order.order_status_name=='订单待支付'" style="float: right; color: blue;">关闭订单</span>
					</div>
					<el-table :data="[order]" style="width: 100%;" >
						<el-table-column label="全选" type="selection" width="55" @select-all="handleSelectAll" @select="handleSelect">	
						</el-table-column>
						<el-table-column prop="orderlist.goods_name" label="商品">
							  <template #default="image">
								  <img :src="downloadUrl+image.row.goods_image" class="avatar" style=" width:60px;height: 60px;object-fit: cover;" />
								  <span>{{image.row.goods_name}}</span>
							  </template>
						</el-table-column>
						<el-table-column prop="order_delivery_amount" label="单位(元)/数量" width="120">
							<template #default="{ row }">
								￥{{row.price_value}}
								{{row.order_delivery_amount}}件
							</template>
						</el-table-column>
						<!-- <el-table-column prop="name" label="维权" width="130"></el-table-column> -->
						<el-table-column prop="order_real_amount" label="实际金额(元)" width="120">
							<template #default="{ row }">
								￥{{row.order_real_amount}}
							</template>
						</el-table-column>
						<el-table-column prop="user_name" label="卖家/收货人" width="120"></el-table-column>
						<el-table-column prop="order_delivery_name" label="配送方式" width="130"></el-table-column>
						<el-table-column prop="order_status_name" label="订单状态" width="96"></el-table-column>
						<el-table-column label="操作" width="140">
						<template #default="{ row }">
							<a class="mya" @click="toOrderdetail(row.order_id)">详情</a>
							<a class="mya" @click="setorderId(row.order_id)">备注</a>
						</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			
			<el-dialog v-model="dialogFormVisible" title="备注" width="500">
			    <el-form :model="form">
			      <el-form-item>
					<el-input
				    v-model="form.content"
				    style="width: 240px;height: 80px;margin: 0 auto;"
				    :rows="4"
				    type="textarea"
				    placeholder="Please input"
					autocomplete="off"
				  />
			      </el-form-item>
			    </el-form>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="dialogFormVisible = false">取消</el-button>
			        <el-button type="primary" @click="wmark">确认</el-button>
			      </div>
			    </template>
			  </el-dialog>
				<el-pagination layout="prev,pager,next" :page-count="total" :page-size="pageSize"
					v-model:current-page="pageIndex" @current-change="changePage">
				</el-pagination>
			</el-main>
		</el-container>
	</div>
	
</template>
<script setup>
	import Header from '@/components/Header.vue'
	import { useCounterStore } from "@/stores/counter";
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import {
		Search,
		Lock,
		Calendar
	} from '@element-plus/icons-vue'
	import {
		getOrderlist,
		getOrdercode,
		getPaymethod,
		getOrdersourse,
		getAddmark,
		getLookmark,
		getOrderdetail,
		getOrderstuta
	} from "@/api"
	import { useRouter,useRoute } from 'vue-router'
	import { downloadUrl,baseUrl } from "@/utils/request";
	import { number } from 'echarts';
	import { ElMessage } from 'element-plus'

	let counter=useCounterStore()
	let router=useRouter()
	let route=useRoute()
	const dialogFormVisible = ref(false)
	const form = reactive({
	  content: '',
	  delivery: false,
	  type: [],
	  resource: '',
	  desc: '',
	})
	let pageIndex = ref(1);
	let pageSize = 5;
	let total = ref(0)
	const code = ref([])
	const methods = ref([])
	const sourse = ref([])
	let codevalue = ref(null)
	let methodsvalue = ref(null);
	let soursevalue = ref(null);
	let createStarTime = ref('')
	let createEndTime = ref('')
	let payStartTime = ref('')
	let payEndTime = ref('')
	//订单编号下拉框
	const getcodeList = async () => {
		let res = await getOrdercode()
		code.value = res
		// console.log("订单编号",res)
	}
	//支付方式下拉框
	const getmethodsList = async () => {
		let res = await getPaymethod()
		methods.value = res
		//console.log(res)
	}
	//订单来源下拉框
	const getsourseList = async () => {
		let res = await getOrdersourse()
		sourse.value = res
		//console.log(res)
	}
	//获取搜索订单列表
	let orderlist = ref([])
	const imageUrl = ref('')
	// console.log(orderlist);
	const getList = async () => {
		let res = await getOrderlist({
			pageIndex: pageIndex.value,
			pageSize: pageSize,
			siteId: Number(sessionStorage.getItem("siteId"))
		})
		orderlist.value = res.orderList
		total.value = res.pageCount
		showTips.value=false
		// console.log("列表",res)
		//处理时间
		orderlist.value.forEach((v)=>{
			v.create_time = v.create_time.replace("T"," ")
		})
	}
	//点击标签切换不同状态类型列表
	let activeName = ref("1")
	const dataArr=[]
	let statusId=ref('')
	const goType = async (a) => {
		// console.log(a)
		if(a=="1"){
			getList()
			
		}else{
			statusId.value=Number(a);
			searchOrder()
		}
		// let res = await getOrderlist({
		// 	pageIndex: pageIndex.value,
		// 	pageSize: pageSize,
		// 	siteId: Number(sessionStorage.getItem("siteId")),
		// 	"orderStatusId":Number(a) 
		// })
		// if(a=="2"){
		// 	var filterData=res.orderList.filter(x=>x.order_status_name=="订单待支付")
		// 	dataArr.push(filterData)
		// 	orderlist.value = dataArr[0]
		// 	console.log(orderlist.value);
		// 	total.value =1
		// }else if(a=="6"){
		// 	var filterData=res.orderList.filter(x=>x.order_status_name=="订单待发货")
		// 	dataArr.push(filterData)
		// 	orderlist.value = dataArr[0]
		// 	console.log(orderlist.value);
		// 	total.value =1
		// }else if(a=="7"){
		// 	var filterData=res.orderList.filter(x=>x.order_status_name=="订单待发货")
		// 	dataArr.push(filterData)
		// 	orderlist.value = dataArr[0]
		// 	console.log(orderlist.value);
		// 	total.value =1
		// }
		// else{
		// 	orderlist.value = res.orderList
		// 	total.value = res.pageCount
		// }
		//console.log(res);
		//console.log(a)
		// orderlist.value = res.orderList
		// total.value = res.pageCount
	}
	let showTips=ref(false)

	//搜索订单
	const searchOrder=async ()=>{
		let res = await getOrderlist({
			pageIndex: pageIndex.value,
			pageSize: pageSize,
			siteId: Number(sessionStorage.getItem("siteId")),
			orderCode:codevalue.value,
			orderSourceId:soursevalue.value,
			payMethodId:methodsvalue.value,
			createStarTime:createStarTime.value,
			createEndTime:createEndTime.value,
			payStartTime:payStartTime.value,
			payEndTime:payEndTime.value,
			orderStatusId:statusId.value
		})
		// console.log("搜索",res)
		if(res.orderList.length==0){
			showTips.value=true
			total.value = res.pageCount
		}else{
			orderlist.value = res.orderList
			//处理时间
			orderlist.value.forEach((v)=>{
				v.create_time = v.create_time.replace("T"," ")
			})
			total.value = res.pageCount
			showTips.value=false
		}
	}
	//获取订单状态
	const getstuta = async () => {
		let res = await getOrderstuta()
		//console.log(res)
	}

	// 到详情页
	const toOrderdetail=(orderid)=>{
		sessionStorage.setItem("ordetailID",orderid)
		counter.addRouteFn('marketSys',"orderdetail","/marketSys/orderdetail")
		//console.log(router.getRoutes())
		router.push("/marketSys/orderdetail")
	}
	//点击备注
	const setorderId=async(order)=>{
		sessionStorage.setItem("orderId",order)
		dialogFormVisible.value= true
			let res = await getLookmark({
				orderId:Number(sessionStorage.getItem("orderId"))
			})
			form.content=res[0].order_notes
			//console.log(res)
	}
	//确认添加备注
	const wmark = async () => {
		let res = await getAddmark({
			orderNotes:form.content,
			orderId:Number(sessionStorage.getItem("orderId"))
		})
		//console.log("备注",res)
		if(res == "1"){
			ElMessage.success({
				message:"修改成功"
			})
		}else{
			ElMessage.error({
				message:"修改失败"
			})
		}
		dialogFormVisible.value= false
	}
	//获取分页
	const changePage = (page) => {
		//console.log(page)
		pageIndex.value = page;
		searchOrder()
	}
	onMounted(() => {
		getList()
		getcodeList()
		getmethodsList()
		getsourseList()
		getstuta()
	})

	const shortcuts = [{
			text: 'Last week',
			value: () => {
				const end = new Date()
				const start = new Date()
				start.setDate(start.getDate() - 7)
				return [start, end]
			},
		},
		{
			text: 'Last month',
			value: () => {
				const end = new Date()
				const start = new Date()
				start.setMonth(start.getMonth() - 1)
				return [start, end]
			},
		},
		{
			text: 'Last 3 months',
			value: () => {
				const end = new Date()
				const start = new Date()
				start.setMonth(start.getMonth() - 3)
				return [start, end]
			},
		},
	]

	const tableData = []
	//操控全选
	const selectedItems = ref([]);
	const handleSelectAll = (selection) => {
		selectedItems.value = selection;
	};
	const handleSelect = (selection, row) => {
		selectedItems.value = selection;
	};
	const replay=()=>{
		codevalue.value = ""
		methodsvalue.value = ""
		soursevalue.value = ""
		createStarTime.value = ""
		createEndTime.value = ""
		payStartTime.value = ""
		payEndTime.value = ""
		activeName.value = ''
		statusId.value=''
		getList()
		activeName.value="1"
	}
</script>